<%@page import="com.jfinal.kit.PropKit"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	import="cn.com.dashihui.web.common.OrderCode" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
<title>钱包明细</title>
<jsp:include page="../../include/header.jsp"></jsp:include>
<style type="text/css">
table th {
	text-align: center;
}

table td {
	text-align: center;
}

table {
	empty-cells: show;
	border-collapse: collapse;
	margin: 0 auto;
}

.col-lg-9 {
	width: 100%;
}

.pcc {
	width: 110px;
	height: 34px;
}

input {
	text-indent: 10px;
	border-radius: 5px;
}
#money{
     font-size: 20px;
}
#noAuthority{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	width:50%;
	height:300px;
	color:#ccc;
    font-size:30px;
    text-align: center;

}
</style>
</head>
<body>
	<div id="wrapper"  class="row">
		
				<div class="col-lg-12">
					<h1 class="page-header">钱包明细统计</h1>
				</div>
			<!-- 搜索框 -->
				<div class="title-top col-lg-12">
					<label class="search-label">姓名：</label><input type="text"
						id="sName" value="" placeholder="输入姓名"
						class="form-control search-input width200" maxlength="21">
					<label class="search-label">手机号码：</label><input type="text"
						id="sPhone" value="" placeholder="手机号"
						class="form-control search-input width200" maxlength="21">

					<label class="search-label">时间：</label><input type="text" id="sBeginDate" autocomplete="off" value="" class="form-control search-input width120 datetimepicker"
						data-format="yyyy-mm-dd" > <label
						class="search-label">至</label><input type="text" id="sEndDate" autocomplete="off" 
						value="" class="form-control search-input width120 datetimepicker"
						data-format="yyyy-mm-dd" >
						<label class="search-label">类别：</label>
							 <select id="sType" class="selectpicker pull-left p-l-5" data-width="12%">
							   <option value="">请选择</option>
							   <option value="1">充值</option>
							   <option value="2">消费</option>
							   <option value="3">退款</option>
							   </select>
						<shiro:hasPermission name="bus:money:doExcel">
							<button onclick="doExcel();"  class="btn btn-success pull-right" >导出</button>
				</shiro:hasPermission>					
				</div>
				
	
				<div class="title-top col-lg-12">
				      		
							<label class="search-label">分公司：</label> 
							<select id="sStore" class="selectpicker pull-left p-l-5" multiple="multiple" data-width="15%">
								<c:forEach items="${storeList}" var="seller">
									<option value="${seller.id}">${seller.title}</option>
								</c:forEach>
							</select>
						<button class="btn btn-success search-btn" onclick="query();">确定</button>
						<button class="btn btn-success search-btn" onclick="reset();">重置</button>
						<div class="clearfix"></div>
				</div>
				<div class="col-lg-12 title-top">
					<div class="col-lg-12">
							<div class="text-muted single-line-text pull-left">
								共 <font color="#428bca" id="dataCount">0</font> 条记录
							</div>
							
					</div>
					<div class="table-responsive panel panel-default">
						<table id="dataTable" class="table table-hover table-bordered"
							style="overflow: scroll;">
							<thead>
								<tr>								
									<th width="15%">会员姓名</th>
									<th width="15%">手机号码</th>
									<th width="15%">金额</th>
									<th width="15%">类别</th>
									<th width="15%">剩余金额</th>
									<th width="15%">时间</th>
									<th width="">所属分公司</th>
								</tr>
							</thead>
							<tbody id="dataList"></tbody>							
						</table>
					</div>
				<div class="col-lg-12">
        			<div class = "pull-right">
	        			<div class="text-muted  pull-left" style="margin-top:20px; margin-right:18px;">
							<select id="pageSize" name="pageSize" class="selectpicker" data-width="100" onchange="query()" >
		    					<option value="10" selected = "selected">10条/页</option>
								<option value="15">15条/页</option>
								<option value="20">20条/页</option>
								<option value="50">50条/页</option>
								<option value="100">100条/页</option>
		    				</select>
						</div>
		        		<ul id="dataPagination" class="pagination-sm pull-right"></ul>
		        	</div>
	        	</div>
					<!-- 金额总和 -->
					<div id="money"></div>
				</div>
		
		<!-- 无权查看显示 -->
		<div id="noAuthority" style="display:none">无权限查看“钱包明细统计”</div>
		
	</div>
	<jsp:include page="../../include/javascripts.jsp"></jsp:include>
	<!-- 异步加载下一页数据后，用模板渲染 -->
	<script type="text/html" id="dataTpl">
		{{each list as item}}
				 <tr id="item{{item.id}}" data-id="{{item.id}}">
                    <td><a href="javascript:showUser('{{item.id}}');"><span class="btn">{{item.name}}</span></a></td>
					<td>{{item.phone}}</td>
                    {{if item.type==1 }}
                          <td>+{{item.amount }}</td>
                    {{else if item.type==2}}
						  <td>-{{item.amount }}</td>
                    {{/if}}
					{{if item.orderType==1}}
                           {{if item.type==1 }}
								<td>退款</td>
							{{else if item.type==2}}
								<td>消费</td>
                            {{/if}}
                     {{else if item.orderType=2 }}
					       <td>充值</td>
                     {{/if}}
					<td>{{item.nowAmount}}</td>
                    <td>{{item.createDate}}</td>
					<td>{{item.title}}</td>
				</tr>
		{{/each}}
</script>
	<script type="text/javascript">
		var dataPaginator;
		$(query);
		function query() {
			money()
			var pageSize=$("#pageSize").val();
			var phone = $("#sPhone").val(), name = $("#sName").val(), store = $("#sStore").val(), 
			    beginDate=$("#sBeginDate").val(), endDate=$("#sEndDate").val(),types=$("#sType").val();
			console.log(">>>>"+store);
			var stores;
			if(store !=null && store !="" && store !=undefined){
				stores=store.join("','");
			}
			
			
			var params = {
				pageSize : pageSize,
				phone : phone,
				name : name,
				beginDate:beginDate,
				endDate:endDate,
				types:types,
				stores : stores
			};
			if (dataPaginator) {
				dataPaginator.destroy();
			}
			dataPaginator = Kit.pagination("#dataPagination",
					"${BASE_PATH}/bus/money/page", params, function(result) {						
						if(result.flag==0){
						
						//设置显示最新的数据数量
						$("#dataCount").html(result.object.totalRow);
						//根据模板渲染数据并填充
						$("#dataList").empty().append(
								template("dataTpl", result.object));
						}else if(result.flag==1){
							var wrapper=document.getElementById("page-wrapper");
							wrapper.innerHTML="";
							wrapper.style.height="0";
							var act=document.getElementById("noAuthority");
							act.style.display="block";
		                   return;					
						}
					});
			money()
		}
		//余额总和 
		function money() {
			var pageSize=$("#pageSize").val();
			var phone = $("#sPhone").val(), name = $("#sName").val(), store = $("#sStore").val(), 
			    beginDate=$("#sBeginDate").val(), endDate=$("#sEndDate").val(),types=$("#sType").val();
			var stores;
			if(store !=null && store !="" && store !=undefined){
				stores=store.join("','");
			}			
			var params = {
				pageSize : pageSize,
				phone : phone,
				name : name,
				beginDate:beginDate,
				endDate:endDate,
				types:types,
				stores : stores
			};
			if (dataPaginator) {
				dataPaginator.destroy();
			}
			$.post("${BASE_PATH}/bus/money/findMoney",params,function(result){
				if(result.flag==0){//result.object<=0
					if(result.object==null ){
						$("#money").text("金额总和:￥0.00");//总现金价格
					}
					
					else{
						/* $("#money").text("金额总和:￥"+result.object.money); */
						var num=Math.round(result.object*100)/100; //总现金价格取小数点后2位
						 $("#money").text("金额总和:￥"+num); 				
					 }	 				
				}else if(result.flag==1){
					var wrapper=document.getElementById("page-wrapper");
					wrapper.innerHTML="";
					wrapper.style.height="0";
					var act=document.getElementById("noAuthority");
					act.style.display="block";
                   return;					
				}

			});
		}
		

		//搜索条件重置 
		function reset() {
			$("#sName").val("");
			$("#sPhone").val("");
			$("#sStore").val(" ");
			$("#sStore").trigger("change");
			$("#sStore").selectpicker("refresh");
			$("#sBeginDate").val("");
			$("#sEndDate").val("");
			$("#sType").val("");
			$("#sType").trigger("change");
			$("#sType").selectpicker("refresh");
		}

		/* function onEditSuccess(newObject) {
			$("#item" + newObject.id).replaceWith(template("dataTpl", {
				"list" : [ newObject ]
			}));
		} */
		function onEditSuccess() {
			/* $("#item" + newObject.id).replaceWith(template("dataTpl", {
				"list" : [ newObject ]
			})); */
			console.log("成功");
		}
		//数据导出
		function doExcel() {
			var phone = $("#sPhone").val(), name = $("#sName").val(), store = $("#sStore").val(), 
		    beginDate=$("#sBeginDate").val(), endDate=$("#sEndDate").val(),types=$("#sType").val();
			
			var stores;
			if(store !=null && store !="" && store !=undefined){
				stores=store.join("','");
			}
			window.location.href = "${BASE_PATH}/bus/money/doVipExcel?phone="
					+ phone + "&name=" + name + "&stores=" + stores+"&beginDate=" + beginDate+"&endDate=" + endDate+"&types=" + types;
		}
		var showDialog;
		function showUser(id){
			showDialog = Kit.dialog("会员详情信息","${BASE_PATH}/bus/money/detail/"+id,{size:'size-wide',closable:true}).open();
		}
	</script>
</body>
</html>